<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%
    List list = new ArrayList();
    for(int i = 1; i <= 36; i++) {
        list.add(i);
    }
    session.setAttribute("list", list);
%>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/detail_1.css">
    <link rel="stylesheet" type="text/css" href="/static/css/detail_2.css">
    <script type="text/javascript" src="/static/mag.js"></script>
    <style>
        .bg{width:565px;height: 390px;margin:0 auto;padding:20px;border:1px solid #E8E8E8;overflow: hidden;min-width: 565px;box-sizing: border-box;background: #fff;}
        .bg_left{width: 430px;height:auto;float: left}
        .bg_right{float: left}
        .show{width: 430px;height: 300px;margin-bottom: 10px;position: relative;border:1px solid #E8E8E8;cursor:move}
        .show img{width: 430px;height: 300px;}
        .mask{width: 215px;height: 215px;background: #000;filter: Alpha(opacity=50);opacity:0.5;position: absolute;top: 0;left: 0;display: none;}
        .bigshow{width: 430px;height: 430px;overflow: hidden;margin-left: 10px;display: none;border:1px solid #E8E8E8;}
        .bigshow img{width: 860px;height: 860px;margin-right: 10px;}
        .smallshow{width: 100%;height: 70px;position: relative}
        .smallshow img{width:100%;border:1px solid #e8e8e8;box-sizing: border-box;transition: all 0.5s}
        .smallshow>.middle_box{margin-left: 30px;margin-right: 30px;width:370px;overflow: hidden;height: 70px;}
        .smallshow .middle{overflow: hidden;transition: all 0.5s;height: 70px;}
        .smallshow .middle>li{width: 64px;height: 64px;float: left;cursor:pointer;padding:0 5px;}
        .smallshow>p{position: absolute;top:50%;width: 22px;height: 32px;margin-top: -16px;}
        .smallshow>.prev{left: 0;background: url(/static/images/hover-prev.png) no-repeat;transition: all 0.5s}
        .smallshow>.next{right: 0;background: url(/static/images/hover-next.png) no-repeat;transition: all 0.5s}
        .smallshow>.prev.prevnone{left: 0;background: url(/static/images/prev.png) no-repeat;cursor: not-allowed}
        .smallshow>.next.nextnone{right: 0;background: url(/static/images/next.png) no-repeat;cursor: not-allowed}

        .content .content__aside .content__aside__list.house-detail .phone:before{
            background: url() no-repeat 50%/contain;background-color: #3072f6;
        }

    </style>
</head>
<body>
    <jsp:include page="head.jsp"></jsp:include>


    <div class="content clear w1150">
        <!-- 房源标题 -->
        <p class="content__title">${data.title} ${data.house.position} ${data.house.orientation}</p>
        <div class="content__core">
            <div class="content__article__slide" id="mySwipe" style="visibility: visible;">

                    <div class="bg">
                        <div class="bg_left">
                            <div class="show">
                                <c:if test="${data.house.img == null}"><img src="/static/images/img_error.png" alt=""></c:if>
                                <c:if test="${data.house.img != null}"><img src="/preview/img/${data.house.img}" alt=""></c:if>
<%--                                <div class="mask"></div>--%>
                            </div>
                            <div class="smallshow">
                                <p class="prev prevnone"></p>
                                <div class="middle_box">
                                    <ul class="middle">
                                        <c:forEach items="${data.house.imgs}" varStatus="i" var="img">
                                            <li><img src="/preview/img/${img}" alt=""></li>
                                        </c:forEach>
                                    </ul>
                                </div>
                                <p class="next "></p>
                            </div>
                        </div>
                            <%--                    <div class="bg_right">--%>
                            <%--                        <div class="bigshow">--%>
                            <%--                            <div class="bigitem">--%>
                            <%--                                <img src="/static/device/dianshi.jpg" alt="">--%>
                            <%--                            </div>--%>
                            <%--                        </div>--%>
                            <%--                    </div>--%>

                </div>
            </div>
            <!-- 右侧黄金展位 -->
            <div class="content__aside fr" id="aside">

                <!-- 租金及支付方式 -->
                <div class="content__aside--title">
                    <span>${data.price}</span>元/月
                    <div class="operate-box">

                    </div>
                </div>

                <!-- 房源标签列表 -->
                <p class="content__aside--tags">
                    <c:if test="${not empty data.house.tag }">
                        <%--切割字符串--%>
                        <c:set value="${ fn:split(data.house.tag, ',') }" var="strList" />
                        <%--遍历--%>
                        <c:forEach items="${strList}" var="strname" varStatus="i">
                            <i class="content__item__tag--decoration" data-class="decoration">${strname}</i>
                        </c:forEach>
                    </c:if>
                </p>

                <!-- 房源户型、朝向、面积、租赁方式 -->
                <ul class="content__aside__list">
<%--                    <li><span class="label">租赁方式：</span>整租</li>--%>
                    <li><span class="label">房屋类型：</span>${data.house.type} ${data.house.area}.00㎡</li>
                    <li class="floor">
                        <span class="label">朝向楼层：</span><span class="">${data.house.orientation} ${data.house.floor}层/${data.house.floorMax}层</span>
                    </li>
                    <li class="floor">
                        <span class="label">代理人：</span><span class="">${data.busiName}</span>
                    </li>
                    <li class="floor">
                        <span class="label">代理人电话：</span><span class="">${data.busiMobile}</span>
                    </li>
                    <li class="floor">
                        <span class="label">最小租赁时长：</span><span class="">${data.minNumber}个月起租</span>
                    </li>
                </ul>
                <div class="content__aside__list house-detail">

                    <div class="phone__hover--wrapper">

                        <c:if test="${user == null}">
                            <div class="content__aside__list--bottom phone" style="">
                                <a href="/login" style="margin-left: -25px;color: #FFFFFF">请先登录</a>
                            </div>
                        </c:if>

                        <c:if test="${user != null && data.status != '0'}">
                            <div id="createOrder" class="content__aside__list--bottom phone">
                                <a href="javascript:void(0)" style="margin-left: -25px;color: #FFFFFF">我要入住</a>
                            </div>
                        </c:if>
                    </div>
                </div>
        </div>

        <div class="content__detail">

            <!-- 房源左侧内容 -->
            <div class="content__article fl">
                <!-- 房源基本信息 -->
                <div class="content__article__info">
                    <h3>房屋信息</h3>
                    <ul>
                        <li class="fl oneline">基本信息</li>
                        <li class="fl oneline">面积：${data.house.area}.00㎡</li>
                        <li class="fl oneline">朝向：${data.house.orientation}</li>
                        <li class="fl oneline">&nbsp;</li>
                        <li class="fl oneline">维护：${data.createTime}</li>
                        <li class="fl oneline">入住：随时入住</li>
                        <li class="fl oneline">&nbsp;</li>
                        <li class="fl oneline">楼层：${data.house.floor}层/${data.house.floorMax}层</li>
                        <li class="fl oneline">电梯：${data.house.elevator == '1' ? '是' : '否'}</li>
                        <li class="fl oneline">&nbsp;</li>
                        <li class="fl oneline">房屋年代：${data.house.years}</li>
                        <li class="fl oneline">备注：${data.remark}</li>
<%--                        <li class="fl oneline">&nbsp;</li>--%>
                    </ul>

                </div>

                <!-- 房源分割标识线，js里用到，勿删 -->
                <div class="info__line line"></div>

                <!-- 配套设施列表 -->
                <ul class="content__article__info2">
                    <li class="fl oneline">配套设施</li>
                    <c:choose>
                        <c:when test="${fn:contains(data.house.device, '洗衣机')}">
                            <li class="fl oneline  ">
                                <i style="background-image: url('/static/device/xiyiji.jpg')"></i>
                                洗衣机
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="fl oneline  facility_no">
                                <i style="background-image: url('/static/device/xiyiji_no.jpg')"></i>
                                洗衣机
                            </li>
                        </c:otherwise>
                    </c:choose>

                    <c:choose>
                        <c:when test="${fn:contains(data.house.device, '空调')}">
                            <li class="fl oneline  ">
                                <i style="background-image: url('/static/device/kongtiao.jpg')"></i>
                                空调
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="fl oneline  facility_no">
                                <i style="background-image: url('/static/device/kongtiao_no.jpg')"></i>
                                空调
                            </li>
                        </c:otherwise>
                    </c:choose>

                    <c:choose>
                        <c:when test="${fn:contains(data.house.device, '衣柜')}">
                            <li class="fl oneline  ">
                                <i style="background-image: url('/static/device/yigui.jpg')"></i>
                                衣柜
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="fl oneline  facility_no">
                                <i style="background-image: url('/static/device/yigui_no.jpg')"></i>
                                衣柜
                            </li>
                        </c:otherwise>
                    </c:choose>

                    <c:choose>
                        <c:when test="${fn:contains(data.house.device, '电视')}">
                            <li class="fl oneline  ">
                                <i style="background-image: url('/static/device/dianshi.jpg')"></i>
                                电视
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="fl oneline  facility_no">
                                <i style="background-image: url('/static/device/dianshi_no.jpg')"></i>
                                电视
                            </li>
                        </c:otherwise>
                    </c:choose>

                    <c:choose>
                        <c:when test="${fn:contains(data.house.device, '冰箱')}">
                            <li class="fl oneline  ">
                                <i style="background-image: url('/static/device/bingxiang.jpg')"></i>
                                冰箱
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="fl oneline  facility_no">
                                <i style="background-image: url('/static/device/bingxiang_no.jpg')"></i>
                                冰箱
                            </li>
                        </c:otherwise>
                    </c:choose>

                    <c:choose>
                        <c:when test="${fn:contains(data.house.device, '热水器')}">
                            <li class="fl oneline  ">
                                <i style="background-image: url('/static/device/reshuiqi.jpg')"></i>
                                热水器
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="fl oneline  facility_no">
                                <i style="background-image: url('/static/device/reshuiqi_no.jpg')"></i>
                                热水器
                            </li>
                        </c:otherwise>
                    </c:choose>

                    <c:choose>
                        <c:when test="${fn:contains(data.house.device, '床')}">
                            <li class="fl oneline  ">
                                <i style="background-image: url('/static/device/chuang.jpg')"></i>
                                床
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="fl oneline  facility_no">
                                <i style="background-image: url('/static/device/chuang_no.jpg')"></i>
                                床
                            </li>
                        </c:otherwise>
                    </c:choose>

                    <c:choose>
                        <c:when test="${fn:contains(data.house.device, '暖气')}">
                            <li class="fl oneline  ">
                                <i style="background-image: url('/static/device/nuanqi.jpg')"></i>
                                暖气
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="fl oneline  facility_no">
                                <i style="background-image: url('/static/device/nuanqi_no.jpg')"></i>
                                暖气
                            </li>
                        </c:otherwise>
                    </c:choose>

                    <c:choose>
                        <c:when test="${fn:contains(data.house.device, '宽带')}">
                            <li class="fl oneline ">
                                <i style="background-image: url('/static/device/kuandai.jpg')"></i>
                                宽带
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="fl oneline facility_no ">
                                <i style="background-image: url('/static/device/kuandai_no.jpg')"></i>
                                宽带
                            </li>
                        </c:otherwise>
                    </c:choose>

                    <c:choose>
                        <c:when test="${fn:contains(data.house.device, '天然气')}">
                            <li class="fl oneline  ">
                                <i style="background-image: url('/static/device/tianranqi.jpg')"></i>
                                天然气
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="fl oneline  facility_no">
                                <i style="background-image: url('/static/device/tianranqi_no.jpg')"></i>
                                天然气
                            </li>
                        </c:otherwise>
                    </c:choose>

                </ul>


            </div>

        </div>
    </div>
    </div>

        <div id="dlgSave" class="easyui-dialog dlg-save" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
            <form id="fmSave" method="post" novalidate style="margin:0;padding:20px 50px">
                <input type="hidden" id="leaseId" name="leaseId" value="${data.id}">
                <table cellpadding="5">
                    <tr>
                        <td colspan="1">入住时间（七天内入住）:</td>
                        <td colspan="3">
                            <input id="checkInTime" name="checkInTime" class="easyui-datebox" required="true" label="" style="width:200px;">
                        </td>
                    </tr>

                    <tr>
                        <td colspan="1">租赁时长:</td>
                        <td colspan="3">
                            <select id="leaseTime" name="leaseTime" class="easyui-combobox" style="width:100%;">
                                <c:forEach items="${list}" varStatus="i" var="m">
                                    <c:if test="${m >= data.minNumber}">
                                        <option value="${m}">${m}个月</option>
                                    </c:if>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="1">姓名:</td>
                        <td colspan="3">
                            <input name="customerName" class="easyui-textbox" required="true" label="" style="width:100%">
                        </td>
                    </tr>

                    <tr>
                        <td colspan="1">联系方式:</td>
                        <td colspan="3">
                            <input name="customerMobile" class="easyui-textbox" required="true" label="" style="width:100%">
                        </td>
                    </tr>

                    <tr>
                        <td colspan="1">身份证号:</td>
                        <td colspan="3">
                            <input name="customerCard" class="easyui-textbox" data-options="validType:'length[18, 18]'" required="true" label="" style="width:100%">
                        </td>
                    </tr>

                    <tr>
                        <td colspan="1">需支付:</td>
                        <td colspan="3" id="price"></td>
                    </tr>

                </table>
            </form>
        </div>
        <div id="dlg-buttons">
            <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="save()" style="width:90px">下单</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgSave').dialog('close')" style="width:90px">取消</a>
        </div>

    <script>
        $(function(){
            /*
             show  //正常状态的框
             bigshow   // 放大的框的盒子
             smallshow  //缩小版的框
             mask   //放大的区域（黑色遮罩）
             bigitem  //放大的框
             */
            var obj = new mag('.show', '.bigshow','.smallshow','.mask','.bigitem');
            obj.init();
        });

        var price = '${data.price}';


        $('#dlgSave').dialog({
            title: '填写订单',
            shadow: true,
            width: 500,
            left: ($(window).width() / 2 ) - 250,
            top: 100
        });

        $("#createOrder").click(function() {
            // $('#dlgSave').dialog('open').dialog('center').dialog('setTitle','填写订单');
            $('#dlgSave').dialog('open');
        });

        $("#leaseTime").combobox({
            onLoadSuccess: function(value) {
                if(value.length > 0) {
                    $("#price").text(price * value[0].value);
                }
            },
            onChange: function(value) {
                $("#price").text(price * value);
            }
        });


        function save() {

            if(!$('#fmSave').form('enableValidation').form('validate')) {
                return;
            }

            $('#dlgSave').dialog('close');
            $('#fmSave').form('submit',{
                url: '/order/saveOrUpdate',
                onSubmit: function() {
                    return $(this).form('enableValidation').form('validate');
                },
                success: function(data){
                    let res = $.parseJSON(data);
                    console.log(res);

                    if(res.success) {

                        window.location = '/order/contract?orderId=' + res.data.id;


                        // $.messager.show({
                        //     title: 'Success',
                        //     msg: '下单成功，即将跳转合同页！'
                        // });

                        // setTimeout(function() {
                        //     window.location = '/personal';
                        // }, 2000);
                    } else {
                        $.messager.show({
                            title: 'Error',
                            msg: res.msg
                        });
                    }
                }
            });
        }
    </script>
</body>
</html>